import {
  settings,
  clearSettings,
  importSettings,
  resetSettings,
  changeSetting,
} from "../settings";
import { presets, resetPresets, importPresets, clearPresets } from "../presets";
import { histories, importHistories, clearHistory } from "../histories";
import { engines, resetEngines, importEngines, clearEngines } from "../engines";
import { notes, resetNotes, importNotes, clearNotes } from "../Widgets/notes";
import { importData, downText, checkKey } from "../utilities";
import SettingGroup from "./SettingGroup";
import ActionSettings from "./ActionSettings";
import SearchSettings from "./SearchSettings";
import FavoSettings from "./FavoSettings";
import WidgetSettings from "./WidgetSettings";

const SettingsPage = () => (
  <>
    <label class="select m-2 w-[90%]">
      <span class="label mt-[0] mb-[0] overflow-visible">配色</span>
      <select
        value={String(settings.value.theme)}
        class="select"
        onChange={(event) => {
          changeSetting("", "theme", Number.parseInt(event.target.value, 10));
        }}
      >
        <option value="0">跟随浏览器</option>
        <option value="1">日间</option>
        <option value="2">夜晚</option>
      </select>
    </label>
    <SettingGroup title="动作">
      <ActionSettings />
    </SettingGroup>
    <SettingGroup title="搜索设置">
      <SearchSettings />
    </SettingGroup>
    <SettingGroup title="收藏设置">
      <FavoSettings />
    </SettingGroup>
    <SettingGroup title="组件设置">
      <WidgetSettings />
    </SettingGroup>
    <SettingGroup title="数据管理" outClass="*:btn-soft *:btn-wide *:my-2">
      <button
        class="btn btn-warning"
        type="button"
        onClick={() => resetSettings()}
      >
        重置所有设置项
      </button>
      <button
        class="btn btn-secondary"
        type="button"
        onClick={() => {
          importData(
            (data) =>
              data === void 0 ||
              !checkKey(
                data,
                ["settings", "histories", "engines", "presets"],
                "notes",
              ),
            (data, merge) => {
              importSettings(data.settings);
              importHistories(data.histories, merge);
              importEngines(data.engines, merge);
              importPresets(data.presets, merge);
              data.notes && importNotes(data.notes, merge);
            },
          );
        }}
      >
        导入数据
      </button>
      <button
        class="btn btn-info"
        type="button"
        onClick={() =>
          downText(
            JSON.stringify(
              {
                settings: settings.value,
                histories: histories.value,
                engines: engines.value,
                presets: presets.value,
                notes: notes.value,
              },
              void 0,
              2,
            ),
            "主页数据.json",
          )
        }
      >
        导出数据
      </button>
      <button
        class="btn btn-warning"
        type="button"
        onClick={() => {
          if (confirm("即将恢复所有数据到默认值，并清空搜索历史，确定吗")) {
            resetSettings();
            clearHistory();
            resetEngines();
            resetPresets();
            resetNotes();
          }
        }}
      >
        重置所有数据
      </button>
      <button
        class="btn btn-error"
        type="button"
        onClick={() => {
          if (
            confirm(
              "即将清空所有存储的数据，确定吗\n\n如需卸载，请点击确定，然后立即清空 HTML 代码和自定义 CSS，并删除 js 文件",
            )
          ) {
            clearSettings();
            clearHistory();
            clearEngines();
            clearPresets();
            clearNotes();
          }
        }}
      >
        清空所有存储数据
      </button>
    </SettingGroup>
  </>
);

export default SettingsPage;
